<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-04-13 15:46:22
 * @LastEditTime: 2022-04-19 10:55:22
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="com_product">
    <h1>供应产品</h1>
    <div class="nocontent_bg" v-show="!total">
      <el-image :src="require('@/assets/role_bg2.png')"></el-image>
      <p style="color: #999999">暂无供应产品</p>
    </div>
    <div class="product_box">
      <div
        class="product_item"
        v-for="(item, index) in productList"
        :key="index"
        :style="{ marginRight: (index + 1) % 4 == 0 ? '0' : '20px' }"
      >
        <el-image class="img_item" :src="item.fileAddress" style="height: 272px; width: 272px"></el-image>
        <div class="product_content">
          <p class="product_name">
            <tool-tip-node :oneLine="true" :value="item.productName"></tool-tip-node>
          </p>
          <p class="product_price">{{ item.productPrice }}元</p>
          <div class="product_check" @click="checkProduct(item.id)">查看</div>
        </div>
      </div>
    </div>
    <div class="pag_box" v-show="total">
      <element-pagination
        :Total="total"
        @getData="getPagChange"
        :Page="page"
        :Size="8"
        :Layout="'total,  prev, pager, next, jumper'"
      ></element-pagination>
    </div>
    <el-dialog
      width="905px"
      v-if="visible"
      :center="true"
      :close-on-click-modal="false"
      title="查看产品详情"
      :before-close="closeDialog"
      :visible.sync="visible"
    >
      <product-detail-modify :id="productId" @close="dialogClose"></product-detail-modify>
    </el-dialog>
  </div>
</template>

<script>
import ElementPagination from '../../../components/ElementPagination.vue'
import ToolTipNode from '../../../components/ToolTipNode.vue'
import ProductDetailModify from './productDetailModify.vue'
export default {
  components: { ElementPagination, ToolTipNode, ProductDetailModify },
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      total: 20,
      visible: false,
      page: 1,
      size: 8,
      productId: null,
      productList: []
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    id() {
      this.getData()
    }
  },
  methods: {
    dialogClose() {
      this.visible = false
      this.productId = null
    },
    closeDialog(done) {
      done()
    },
    checkProduct(id) {
      this.productId = id
      this.visible = true
    },
    // 子组件触发分页时触发
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/product/getAllProduct',
        data: {
          page: this.page,
          size: this.size,
          enterpriseId: this.id
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.productList = res.data.records
            this.total = res.data.total
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
#com_product {
  padding: 20px 20px 0;
  border: 1px solid #d6d6d6;
  border-top: none;
  h1 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding-left: 10px;
    border-left: 4px solid #fa7355;
    span {
      font-weight: normal;
      color: #999;
    }
  }
  .product_box {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .product_item {
      display: flex;
      flex-direction: column;
      width: 272px;
      height: 409px;
      border: 1px solid #dbdbdb;
      margin-bottom: 20px;
      &:hover {
        border-color: #fa7355;
      }
      .img_item {
        flex-shrink: 0;
      }
      .product_content {
        padding: 16px 16px;
        line-height: 1;
        flex: 1;
        .product_price {
          font-size: 22px;
          color: #fa7355;
          margin-top: 14px;
        }
        .product_check {
          text-align: center;
          line-height: 40px;
          margin-top: 14px;
          cursor: pointer;
          width: 100%;
          height: 40px;
          color: #fff;
          font-size: 16px;
          background-color: #fa7355;
        }
      }
    }
  }
  .pag_box {
    padding-bottom: 20px;
    padding-top: 20px;
    /deep/ .el-pagination {
      margin-top: 0;
      color: #333;
    }
  }
  .nocontent_bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 228px;
  }
}
</style>
